<template>
  <div>
    <el-checkbox-group v-model="activepcs">
      <el-tree
        ref="tree"
        :default-expanded-keys="expandedkeys"
        :highlight-current="true"
        lazy
        :load="loadNode"
        node-key="id"
        :props="props"
      >
        <template #default="{ data, node }">
          <slot :data="data" :node="node">
            <div
              class="el-tree-node__label"
              style="
                display: flex;
                flex: 1;
                justify-content: space-between;
                align-items: center;
              "
            >
              <span>{{ data.pcs }}({{ data.sum }})</span>
              <div
                style="
                  display: flex;
                  flex: 1;
                  justify-content: flex-end;
                  align-items: center;
                "
              >
                <el-checkbox :label="data.id" size="medium" @click.stop>
                  &nbsp;
                </el-checkbox>
                <el-tag
                  class="ml-2"
                  :type="childmodal(data)"
                  @click.stop="addchild(data)"
                >
                  <!-- :modal="childmodal(data)" -->
                  全选下级站点
                </el-tag>
              </div>
            </div>
          </slot>
        </template>
      </el-tree>
    </el-checkbox-group>
  </div>
</template>

<script>
  export default {
    name: 'Pcstree',
    props: {
      pcsid: {
        type: Object,
        default: () => {
          return {}
        },
      },
      expandedkeys: {
        type: Array,
        default: () => {
          return []
        },
      },
      searchdata: {
        type: Array,
        default: () => {
          return []
        },
      },
    },
    data() {
      return {
        props: {
          label: 'pcs',
          children: 'pcschildren',
        },
        activepcs: [],
        treedata: [],
      }
    },

    created() {},
    mounted() {},
    methods: {
      childmodal(data) {
        // light	dark / plain
        // success / info / warning / error primary
        let datas = this.$store.state.station.StationPids[data.id]
        if (!datas || data.length == 0) {
          return 'primary'
        }
        datas = datas.map((e) => {
          return e.id
        })
        let datasi = datas.findIndex((e) => {
          return (
            this.activepcs.findIndex((i) => {
              return e == i
            }) == -1
          )
        })
        console.log(datasi, 999, datas, this.activepcs)
        return datasi == -1 ? 'error' : 'primary'
      },
      async addchild(data) {
        let datas = await this.$store.dispatch('station/getstationpid', data.id)
        datas = datas.map((e) => {
          return e.id
        })
        let datasi = datas.findIndex((e) => {
          return (
            this.activepcs.findIndex((i) => {
              return e == i
            }) == -1
          )
        })
        if (datasi == -1) {
          datas.forEach((element) => {
            let activei = this.activepcs.findIndex((e) => {
              return e == element
            })
            if (activei != -1) {
              this.activepcs.splice(activei, 1)
            }
          })
        } else {
          datas.forEach((element) => {
            if (
              this.activepcs.findIndex((e) => {
                return e == element
              }) == -1
            ) {
              this.activepcs.push(element)
            }
          })
        }
      },
      async loadNode(node, resolve) {
        let r = []

        if (node.level == 0) {
          r = await this.$store.dispatch('station/getstationone')
        } else if (
          this.searchdata.find((e) => {
            return e.pid == node.data.id
          })
        ) {
          r = this.searchdata.filter((e) => {
            return e.pid == node.data.id
          })
        } else {
          r = await this.$store.dispatch('station/getstationpid', node.data.id)
        }
        return resolve(r)
      },
      getCurrentNode() {
        return { id: this.activepcs.join() }
      },
      setCurrentKey() {},
    },
  }
</script>
<style>
  .el-tree-node__content {
    height: 50px;
  }
</style>
